<template>
	<view class="content-box">
		<view class="content-header">
			<i class="icon piciconfont icon-xiangqing"></i>
			<view class="num">{{ current + 1 }}/{{ list.length }}</view>
			<view class="close_area" @click="closeArea">
				<i class="icon-btn piciconfont icon-guanbi" @click="closeArea"></i>
				<!-- <u-icon name="close" size="24" @click="closeArea">
					
				</u-icon> -->
			</view>
		</view>
		<view class="face_wrap open">
			<view class="drop"><u-icon :name="!isCloses ? 'arrow-right' : 'arrow-left'" color='#fff'
					@click="sumbits"></u-icon></view>
			<view class="content" :class="{'op':isCloses}">
				<h1><span>智能引擎为您检索到</span><text>{{list[current]?list[current].faces.length:0 }}</text><span>张人脸</span>
				</h1>
				<view class="face_list" v-if="list[current]">
					<image @click="findPicture(item)" class="face" v-for="item in list[current].faces" :key="item.url"
						:src="item.url">
				</view>
			</view><label>人脸识别</label>
		</view>
		<view class="content-n">
			<view class="content-s">
				<swiper :current="current" @change="swiperChange">
					<swiper-item v-for="(item, index) in list" :key="index" class="content-img">
						<image :src="item.url" mode="widthFix" style="width: 100%; height: 100%;"></image>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="content-footer">
			<view>
				<swiper :current="current" @change="swiperChange">
					<swiper-item v-for="(item, index) in list" :key="index" class="swiper-content">
						<div class="item-container">
							<img :src="item.url" alt="" @click="previewClick(index)"
								:class="{ 'highlighted': current === index, 'preview-image': true }" />
						</div>
					</swiper-item>
				</swiper>
			</view>

			<view class="option livePage" v-if="list[current]&& !(list[current].is_buy)">
				<view class="icon_btn" @click="isShow = true"><i class="iconfont-s icondashang2"></i>
					<p>打赏</p>
				</view>
				<view v-if="infrom.photo_price != '0.00'" class="icon_btn" @click="like">
					<i class="iconfont-s"
						:class="{'iconyidianzan': list[current].is_like, 'icondianzan1': !list[current].is_like}"
						:style="{color: list[current].is_like ? 'red' : ''}"></i>
					{{ list[current].is_like ? 1 : '点赞'
						}}
					<!-- <u-icon
						:name="list[current].is_like ? 'heart-fill' : 'heart'" size="28"
						:color="list[current].is_like ? 'red' : ''"></u-icon> {{ list[current].is_like ? 1 : '点赞'
						}} -->
				</view>
				<view v-if="infrom.photo_price != '0.00'" class="icon_btn" @click="cart"><u-icon color="#fff"
						name="shopping-cart" size="28"></u-icon>
					<p>购物车</p>
				</view>
				<view class="btn_row">
					<button :class="{ 'cart_btn': true, 'disabled': list[current].is_cart }" @click="addCart"
						v-if="!list[current].is_buy && infrom.photo_price  != '0.00'"
						:disabled="list[current].is_cart">{{ list[current].is_cart ? '已加入购物车' : '加入购物车' }}</button>
					<button class="buy_btn" @click="payment" v-if="!list[current].is_buy &&  +infrom.photo_price">
						<text>
							{{ infrom.photo_price }} 元
						</text>
						<text>
							查看原图
						</text>
					</button>
					<button class="disableds" @click="viewImg" v-else>
						查看原图
					</button>
				</view>
			</view>
			<section class="option livePage" v-else>
				<view class="btn_row">

					<button class="view-master" @click="viewImg">
						{{(list[current]||{}).isImage?'长按保存':'查看原图'}}
					</button>

				</view>
				<view style="display: flex; justify-content: space-around; width: 440rpx; ">
					<view class="icon_btn" @click="isShow = true"><i class="iconfont-s icondashang2"></i>
						<p>打赏</p>
					</view>
					<view v-if="infrom.photo_price != '0.00'" class="icon_btn" @click="like"> <i class="iconfont-s"
							:class="{'iconyidianzan': list[current].is_like, 'icondianzan1': !list[current].is_like}"
							:style="{color: list[current].is_like ? 'red' : ''}"></i> {{ list[current].is_like ? 1 : '点赞'
						}}
					</view>
				</view>


				<!-- 
				<view class="more_menu">
					<view class="more_item"><i class="piciconfont icon-dashang"></i>
						<p>打赏</p>
					</view>
					<view class="more_item"><i class="piciconfont icon-fenxiang"></i>
						<p>分享</p>
					</view>
				</view> -->
			</section>


			<view class="popup_wrapper" v-if="isShow">
				<view class="g_max">
					<section>
						<view class="live-reward-normal"><img @click="isShow = false"
								src=""
								class="close-btn">
							<view class="target-select">
								<view class="user-swiper-wrapper">
									<view class="user-swiper-item">
										<view class="head-img">
										</view>
										<p class="user-name"></p>
									</view>
								</view>
							</view>
							<view class="reward-box">
								<!-- <p class="reward-text">小程序+直播 徐操</p> -->
								<p class="explain">打赏主播后赏金将送给主播</p>
							</view>
							<view class="redpacket-money">
								<view class="money-list">
									<view @click="payReward(item.reward_amount)" v-for="item in rewardList"
										:key="item.reward_amount"><text>¥</text>{{item.reward_amount}}</view>
								</view>
								<view class="money-img">
									<img src="../static/money2.png" alt="" @click="isMonery= true" />
								</view>
							</view>
						</view>
					</section>
				</view>
			</view>

			<u-overlay :show="isShow" @click="isShow = false"></u-overlay>
			<u-popup :show="isMonery" mode="center" z-index='999912' :closeable='true' @close="isMonery=false">
				<view class='monery-box'>
					<!-- <input type="number" v-model="monery"  placeholder="请输入金额"/> -->
					<u-input v-model="monery" type="number" placeholder="请输入金额" maxlength='' />
					<button @click="submitMoner">确定</button>
				</view>
			</u-popup>

		</view>
	</view>
</template>

<script>
	import {
		api_addCart,
		api_payReward,
		api_addLikes,
		api_getFreePhotoList,
		api_payDirectPhotoBuy
	} from '@/api/photo.js';
	export default {
		name: "preview",
		props: {
			list: {
				type: Array,
				default: () => []
			},
			infrom: {
				type: Object,
				default: () => {}
			},
			live_id: {
				type: String,

			},
			currents: {
				type: Number,
				default: () => 0
			}
		},
		watch: {
			currents(newValue, oldValue) {
				// 在这里处理currents属性的变化
				this.current = newValue;
				console.log('currents属性发生变化，新值为：', newValue);
			}
		},
		data() {
			return {

				isCloses: false,
				isShow: false,
				isMonery: false,
				monery: null,
				current: this.currents,
				rewardList: [{
					reward_amount: 0.01,
				}, {
					reward_amount: 2,
				}, {
					reward_amount: 5,
				}, {
					reward_amount: 10,
				}, {
					reward_amount: 50,
				}, {
					reward_amount: 100,
				}],
				options: {},
			};
		},
		onLoad(options) {
			// this.options = options;
			// console.log(this.options,"this.options")
		},
		created() {
			this.disableScroll();
		},
		methods: {
			closeArea() {
				this.$emit('close', false);
			},
			cart() {
				console.log(this.$parent)
				this.$parent.$parent.getCart();
			},
			submitMoner() {
				if (this.monery <= 0) return;
				this.payReward(this.monery);
			},
			swiperChange(e) {
				this.current = e.detail.current;
			},
			previewClick(index) {
				this.current = index;
			},
			payReward(amount) {
				api_payReward({
					live_id: this.live_id,
					reward_amount: amount,
				}).then(result => {
					if(result.code== 1){
						setTimeout(() => {
							let a = document.createElement('a');
							a.href = result.data.pay_url // 设置跳转链接
							a.target = '_self'; // 在新标签页中打开链接
							a.click();
							// 点击后移除a标签
							document.body.removeChild(a);
						}, 500)
					}else{
						uni.showToast({
							title: result.msg,
							icon: 'none',
						})
					}
					// WeixinJSBridge.invoke(
					// 	'getBrandWCPayRequest', {
					// 		"appId": result.data.appId, //公众号ID，由商户传入
					// 		"timeStamp": result.data.timeStamp, //时间戳，自1970年以来的秒数     
					// 		"nonceStr": result.data.nonceStr, //随机串     
					// 		"package": result.data.package,
					// 		"signType": result.data.signType, //微信签名方式：     
					// 		"paySign": result.data.paySign //微信签名 
					// 	},
					// 	res => {
					// 		if (res.err_msg == "get_brand_wcpay_request:ok") {
					// 			// 使用以上方式判断前端返回,微信团队郑重提示：
					// 			this.isShow = false;
					// 			//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
					// 			uni.showToast({
					// 				title: '打赏成功',
					// 				icon: 'none',
					// 			})
					// 			// this.$toast('打赏成功!')

					// 			// app.list[app.current].is_buy = true;
					// 		}
					// 	})

				})
			},
			addCart() {
				api_addCart({
						live_id: this.live_id,
						ids: this.list[this.current].id,
						type: 'photo_live'
					})
					.then(res => {
						if (res.code == 1) {
							uni.showToast({
								title: '加入购物车成功',
								icon: 'none',
							})
							// this.$toast('加入购物车成功')
							this.list[this.current].is_cart = true;
						}
					})
			},
			like() {
				// 点赞
				// console.log(this.list[this.current], 'list[current].faces')
				api_addLikes({
						id: this.list[this.current].id,
						live_id: this.live_id
					})
					.then(res => {
						if (res.code == 1) {
							this.list[this.current].is_like = true;
						} else {
							uni.showToast({
								title: '服务器错误',
								icon: 'none',
							})
						}

						console.log(res, "res")
						// app.infrom = res.data || {};
						// console.log(app.infrom,"result")
					})
			},
			// 支付
			async payment() {
				let id = this.list[this.current].id
				let app = this;

				let result = await api_payDirectPhotoBuy({
					live_id: this.live_id,
					id: id,
				});

				if (result.code == 1) {
					setTimeout(() => {
						let a = document.createElement('a');
						a.href = result.data.pay_url // 设置跳转链接
						a.target = '_self'; // 在新标签页中打开链接
						a.click();
						// 点击后移除a标签
						document.body.removeChild(a);
					}, 500)
				} else {
					uni.showToast({
						title: '服务器错误',
						icon: 'none',
					})
				}


				// var jWeixin = require('jweixin-module')  


				// 支付
				// api_payDirectPhotoBuy({
				// 	live_id: this.live_id,
				// 	id: id,
				// }).then(result => {
				// 	// console.log(result.data.prepay_id, "result")
				// 	WeixinJSBridge.invoke(
				// 		'getBrandWCPayRequest', {
				// 			"appId": result.data.appId, //公众号ID，由商户传入
				// 			"timeStamp": result.data.timeStamp, //时间戳，自1970年以来的秒数     
				// 			"nonceStr": result.data.nonceStr, //随机串     
				// 			"package": result.data.package,
				// 			"signType": result.data.signType, //微信签名方式：     
				// 			"paySign": result.data.paySign //微信签名 
				// 		},
				// 		res => {
				// 			if (res.err_msg == "get_brand_wcpay_request:ok") {
				// 				// 使用以上方式判断前端返回,微信团队郑重提示：
				// 				//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
				// 				// app.$toast('支付成功!')
				// 				uni.showToast({
				// 					title: '支付成功',
				// 					icon: 'none',
				// 				})
				// 				api_getFreePhotoList({
				// 					live_id: this.live_id,
				// 					ids: app.list[app.current].id,
				// 				}).then(ress => {
				// 					let data = ress.data;
				// 					app.list[app.current].url = data[0].url;
				// 				})
				// 				// app.list[app.current].url = ;
				// 				app.list[app.current].is_buy = true;
				// 			}
				// 		})
				// }).catch(err => {
				// 	uni.showToast({
				// 		title: '服务器错误',
				// 		icon: 'none',
				// 	})
				// })
			},
			sumbits() {
				this.isCloses = !this.isCloses
			},
			viewImg() {
				let app = this;
				api_getFreePhotoList({
					live_id: this.live_id,
					ids: app.list[app.current].id,
				}).then(ress => {
					let data = ress.data;
					app.list[app.current].url = data[0].url;
					app.list[app.current].isImage = true;
					app.updateValue();
				})
			},
			findPicture(item) {
				let url = item.url;
				let id = item.id;
				// console.log(url)
				uni.setStorageSync('imageURL', url);

				// this.$emit('updateValue', this.current, true)
				// this。
				uni.navigateTo({
					url: '/pages/facialDetails/index' +
						`?id=${id}&live_id=${this.live_id || this.options.live_id}` // 要跳转的页面路径
				});
				// this.$router.push({path:'pages/facialDetails/facialDetails'})
			},
			updateValue() {
				// 触发父组件的更新事件
				this.$emit('updateValue', this.current, true)
			},
			// 禁止底层滚动
			disableScroll() {
				// 获取当前滚动位置
				// var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
				// var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
				// // 保持滚动位置不变，同时禁止滚动
				// document.body.style.overflow = 'hidden';
				// window.onscroll = function() {
				// 	window.scrollTo(scrollLeft, scrollTop);
				// };
			},
			// 启用底层滚动
			enableScroll() {
				document.body.style.overflow = '';
				window.onscroll = '';
			},

		}
	}
</script>

<style lang="scss" scoped>


	.content-box {
		overflow: hidden;
		position: fixed;
		top: 0;
		bottom: 0;
		width: 100vw;
		height: 100vh;
		background: #000;
		z-index: 666;

		.content-header {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			box-sizing: border-box;
			background: linear-gradient(180deg, rgba(0, 0, 0, .5), transparent);
			display: flex;
			align-items: center;
			// justify-content: space-between;
			padding: 40rpx;
			font-size: 22rpx;
			z-index: 4;
			transition: opacity .2s;
			color: #fff;

			.num {
				margin: auto;
			}

			.close_area {
				// display: flex;
				// justify-content: flex-end;
				// align-items: center;
				background: rgba(32, 33, 36, .8);
				border-radius: 100rpx;
				overflow: hidden;
				transition: width .3s ease-in-out;
				width: 66rpx;
				height: 66rpx;
				// margin-left: auto;

				.icon-btn {
					width: 66rpx;
					height: 66rpx;

					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 38rpx;
					cursor: pointer;
					flex-shrink: 0;
				}

				position: absolute;
				right: 20rpx;
			}
		}
	}

	.face_wrap {
		position: absolute;
		top: 140rpx;
		right: 0;
		z-index: 2;
		display: flex;
		height: 140rpx;
		line-height: 1.6;
		transform: translateX(0);
		transition: all .3s;

		h1 {
			margin-bottom: 20rpx;
			font-size: 20rpx;
			text-align: center;
		}

		label {
			position: relative;
			top: 0;
			right: 0;
			z-index: 2;
			box-sizing: border-box;
			width: 40rpx;
			height: 100%;
			padding: 12rpx;
			font-size: 20rpx;
			line-height: normal;
			color: #fff;
			background: linear-gradient(135deg, #00abff, #006cff);
		}
	}

	.face_wrap .drop {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 40rpx;
		height: 100%;
		border-radius: 20rpx 0 0 20rpx;
		background-color: #32336a;
		cursor: pointer;
	}

	.face_wrap.open .content {
		width: 300rpx;
		background: url(../static/pic-bg.png)no-repeat;
		background-size: calc(100% + 20rpx) 100%;
		background-position: -20rpx 0;

		h1 {
			font-size: 22rpx;
			color: #fff;
		}
	}

	.face_wrap.open {
		.content.op {
			width: 0;
			overflow: hidden;
		}
	}

	;

	.content-n {
		position: relative;

		.content-s {
			position: absolute;
			width: 100%;
			height: 100%;
		}

		uni-swiper {
			height: 100vh;
		}

		.content-img {
			width: 100vw;
			vertical-align: middle;
			align-items: center;
			justify-content: center;
			display: flex;
		}
	}

	;


	.content-footer {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		z-index: 1113;
		padding-bottom: 0.06rem;
		transition: all .2s;

		uni-swiper {
			height: 100rpx;
		}

		// uni-swiper-item {
		// 	width: 200rpx !important;
		// 	// height: 50px !important;
		// }
		.item-container {
			margin: 0px 5px;
			width: 140rpx;
			height: 80rpx;
		}

		.swiper-content {
			width: 160rpx !important;
			margin-right: 2px;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		.highlighted {
			border: 3rpx solid #fff;
		}

		.view-master {
			width: 200rpx;
			// height: 60rpx;
			font-size: 26rpx;
			background: #1B1B1B;
			color: #fff;
			border: 1rpx solid #fff;
		}

		.option {
			padding: 0 26rpx 26rpx 26rpx;
			justify-content: space-between;
			height: 140rpx;
			display: flex;
			align-items: center;
			margin-top: 30rpx;
			box-sizing: border-box;
			position: relative;
			pointer-events: auto;

			.btn_row {
				display: flex;
				font-size: 18rpx;

				.cart_btn {
					width: 200rpx;
					height: 90rpx;
					line-height: 90rpx;
					background: linear-gradient(270deg, #ff8d00, #ffdc00);
					border-radius: 60rpx 0 0 60rpx;

					font-size: 26rpx;
					color: #fff;
				}

				.disableds {
					width: 300rpx;
					// height: 60rpx;
					font-size: 26rpx;
					background: #1B1B1B;
					color: #fff;
					border: 1rpx solid #fff;
				}

				.cart_btn.disabled {
					width: 220rpx;
					background: grey;
				}

				.buy_btn {
					width: 230rpx;
					height: 90rpx;
					box-sizing: border-box;

					background: linear-gradient(270deg, #006cff, #00a5ff);
					border-radius: 0 60rpx 60rpx 0;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					color: #fff;
					font-size: 25rpx;
					line-height: 2;
					// padding-bottom: 12rpx;

					>text {
						// height: 24px;
					}
				}
			}



			.more_menu {
				position: absolute;
				bottom: calc(100% + 0.15rem);
				left: 10rpx;
				z-index: 5;
				width: 180rpx;
				border-radius: 20rpx;
				font-size: 22rpx;
				color: #202124;
				background: #fff;
				pointer-events: none;
				opacity: 0;
				transition: opacity .2s;
			}

			.more_menu.show {
				opacity: 1;
				pointer-events: auto;
			}
		}



		.icon_btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;
			cursor: pointer;
			color: #fff;
		}




		.popup_wrapper {
			position: fixed;
			// width: 100%;
			// height: 100%;
			z-index: 999911;

			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			.live-reward-normal {
				box-sizing: border-box;
				width: 600rpx;
				height: 800rpx;
				background-image: url(../static/reward-bg.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
				padding-top: 0.34rem;
				position: relative;
				margin: auto;


				.close-btn {
					position: absolute;
					right: 10rpx;
					top: 10rpx;
					width: 30rpx;
					height: 30rpx;
					z-index: 100;
				}

				.belong-to {
					text-align: center;
					color: #ffae00;
					font-size: 34rpx;
					// line-height: 1em;
					margin-top: 20rpx;
					margin-bottom: 20rpx;
				}

				.target-select {
					width: 100%;
					position: relative;
					display: flex;
					flex-direction: column;
					align-items: center;
				}

				.user-name {
					width: 100%;
					text-align: center;
					// margin-bottom: 0.05rem;
					color: #fff;
					font-size: 26rpx;

					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.head-img {
					width: 100%;
					text-align: center;
					overflow: hidden;
					position: relative;

					margin-bottom: 180rpx;

					// img {
					// 	width: 150rpx;
					// 	height: 150rpx;
					// 	border-radius: 50%;
					// }
				}

				.money-list {
					width: 80%;
					margin: 0 auto;
					margin-top: 50rpx;
					display: flex;
					flex-wrap: wrap;
					// height: ;
					overflow-y: scroll;
					-webkit-overflow-scrolling: touch;

					text {
						font-size: 32rpx;
						padding-right: 4px;
					}

					view {
						// color: red;
						font-weight: 600;
						box-sizing: border-box;
						width: 30%;
						height: 80rpx;
						// border: 1px solid #ea0e28;
						margin-bottom: 20rpx;
						margin-left: 2.5%;
						border-radius: 10rpx;
						text-align: center;
						line-height: 80rpx;
						color: #9D340C;
						font-size: 40rpx;
						background: url(../static/money.png);
						background-size: 100% 100%;
					}
				}

				.money-img {
					text-align: center;
					padding-top: 140rpx;

					img {
						width: 200rpx;
						margin: auto;
					}
				}





			}

			.reward-box {
				margin-top: 40px;
				text-align: center;

				.reward-text {
					width: 60%;
					margin: auto;
					border: 1px solid #9F563F;
					border-radius: 40px;
					color: #9F563F;
					padding: 2px 0;
					font-weight: 600;
					font-size: 38rpx;
				}

				.explain {
					margin-top: 10rpx;
					font-size: 32rpx;
					color: #A62802;
				}
			}


		}

		.monery-box {
			padding-top: 40px;
			width: 280rpx;
			text-align: center;

			* {
				font-size: 22rpx;
			}

			.u-input {
				width: 50%;
				margin: auto;
				border: 1px solid #999;
			}

			input {
				margin: auto;
				height: 50rpx;
				width: 140rpx;
				border: 1px solid #999;
			}

			button {
				margin-top: 10rpx;
				margin-bottom: 20rpx;
				width: 140rpx;
				background: #DE4854;
				// border-radius: 0;
				color: #fff;
				// border: 1px solid red;
			}
		}

		;
	}

	.face_list {
		box-sizing: border-box;
		max-width: 100%;
		max-height: 100%;
		padding-left: 0.1rem;
		white-space: nowrap;
		overflow: auto hidden;

		.face {
			width: 80rpx;
			height: 80rpx;
			margin-right: 20rpx;
			border-radius: 50%;
			background-color: #00abff;
			cursor: pointer;
		}
	}
</style>